<template>
  <div class="hello">
    <App></App>
    <x-header>我的申请</x-header>

    <!--列表-->
    <panel header="申请列表&nbsp;&nbsp;(共2条)" :footer="applyListFooter" :list="applyList" :type="applyListType" @on-click-footer="loadApply"></panel>

  </div>
</template>
<script>
import App from '../../App'
import { Tabbar, TabbarItem, Group, Cell, XHeader, Search, PopupHeader, Popup, TransferDom, Radio, Panel } from 'vux'
// import Vue from 'vue'

// Vue.use(myTabbar)

export default {
  name: 'ApiApplyMy',
  directives: {
    TransferDom
  },
  components: {
    App,
    XHeader,
    Search,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    PopupHeader,
    Popup,
    TransferDom,
    Radio,
    Panel
  },
  data () {
    return {
      // 列表类型
      applyListType: '4',
      applyList: [
        {
          title: '南京市鼓楼区水利数据接口',
          desc: '根据国家规定的事项，现需要进行接口申请调用',
          url: {
            path: '/apiApplyDetail?id=1',
            replace: false
          },
          meta: {
            source: '水利',
            date: '2018-06-06',
            other: '审核通过'
          }
        },
        {
          title: '南京市鼓楼区水利数据接口',
          desc: '根据国家规定的事项，现需要进行接口申请调用',
          url: {
            path: '/apiApplyDetail?id=2',
            replace: false
          },
          meta: {
            source: '水利',
            date: '2018-06-06',
            other: '<span style="color: orangered">审核不通过</span>'
          }
        }],
      applyListFooter: {
        title: '<div style="text-align: center">更多</div>'
      }
    }
  },
  methods: {
    // 加载api
    loadApply () {
      var item = {
        title: '南京市鼓楼区水利数据接口',
        desc: '根据国家规定的事项，现需要进行接口申请调用',
        url: {
          path: '/apiApplyDetail?id=3',
          replace: false
        },
        meta: {
          source: '水利',
          date: '2018-06-06',
          other: '<span style="color: orangered">审核不通过</span>'
        }
      }
      this.applyList.push(item)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

